<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>

<h1>the ajax-03 page</h1>
<button onclick="doAjaxGet()">do ajax get</button>
<button onclick="doAjaxPost()">do ajax post</button>
<button onclick="doAjaxDelete()">do ajax delete</button>
<button onclick="doAjaxUpdate()">do ajax update</button>
<div id="result">
    data is loading
</div>
<script src="/js/ajax.js"></script>
<script>

    function doAjaxGet() {
        let url = "http://localhost/doAjaxGet";
        let params = "";
        ajaxGet(url, params, function (result) {
            document.getElementById("result").innerHTML = result;
        })
    }

    function doAjaxPost() {
        let url = "http://localhost/doAjaxPost";
        let params = "id=2&name=电脑&remark=游戏本";
        ajaxPost(url, params, function (result) {
            document.getElementById("result").innerHTML = result;
        })
    }

    function doAjaxDelete() {
        let url = "http://localhost/doAjaxDelete";
        let params = "id=2";
        ajaxPut(url, params, function (result) {
            document.getElementById("result").innerHTML = result;
        })
    }

    function doAjaxUpdate() {
        let url = "http://localhost/doAjaxUpdate";
        let params = "id=2&name=电视&remark=高清TV";
        ajaxDelete(url, params, function (result) {
            document.getElementById("result").innerHTML = result;
        })
    }

</script>

</body>
</html>